<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/page/layout/layout.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

	<h:outputStylesheet>
a.no-decor>img {
    border: none;
}
</h:outputStylesheet>

	<ui:define name="title">
	Registrar pago en la operacion: <h:outputText value="#{applicationBean.operacionActual.operacionId}"/>
	</ui:define>

	<ui:define name="content">
		<a4j:commandLink styleClass="no-decor" render="editGrid"
			execute="@this" oncomplete="#{rich:component('editPane')}.show()">
			<h:graphicImage library="img/icons" name="edit.gif" alt="alta" />
			<h:outputText value="Registrar nuevo pago" />
			<a4j:param value="#{it.index}"
				assignTo="#{listPagoView.currentIndex}" />
			<f:setPropertyActionListener target="#{listPagoView.edited}"
				value="#{listPagoView.new}" />
		</a4j:commandLink>
		<br />
		<a4j:status onstart="#{rich:component('statPane')}.show()"
			onstop="#{rich:component('statPane')}.hide()" />
		<h:form id="formList">
			<rich:dataTable value="#{listPagoView.all}" var="pago"
				iterationStatusVar="it" id="table" rows="15">
				<rich:column>
					<f:facet name="header">#</f:facet>
                #{it.index}
            </rich:column>
				<rich:column>
					<f:facet name="header">Id Pago</f:facet>
					<h:outputText value="#{pago.id.pagoId}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Moto</f:facet>
					<h:outputText value="$ #{pago.operacionPagoMonto}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Fecha de pago</f:facet>
					<h:outputText value="#{pago.operacionPagoFecha}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Accion</f:facet>
					<a4j:commandLink styleClass="no-decor" render="editGrid"
						execute="@this" oncomplete="#{rich:component('editPane')}.show()">
						<h:graphicImage library="img/icons" name="edit.gif" alt="edit" />
						<a4j:param value="#{it.index}"
							assignTo="#{listPagoView.currentIndex}" />
						<f:setPropertyActionListener target="#{listPagoView.edited}"
							value="#{operacion}" />
					</a4j:commandLink>
					<a4j:commandLink styleClass="no-decor" execute="@this"
						render="@none"
						oncomplete="#{rich:component('confirmPane')}.show()">
						<h:graphicImage library="img/icons" name="delete.gif" alt="delete" />
						<a4j:param value="#{operacion}"
							assignTo="#{listPagoView.deleted}" />
					</a4j:commandLink>
				</rich:column>
				<f:facet name="footer">
					<rich:dataScroller page="#{listPagoView.page}" />
				</f:facet>
			</rich:dataTable>

			<a4j:jsFunction name="remove" action="#{listPagoView.remove}"
				render="table" execute="@this"
				oncomplete="#{rich:component('confirmPane')}.hide();" />

			<rich:popupPanel id="statPane" autosized="true">
				<h:graphicImage library="img" name="ai.gif" alt="ai" />
        Por favor espere...
    </rich:popupPanel>

			<rich:popupPanel id="confirmPane" autosized="true">
        Esta seguro que desea eliminar esta fila?
        <a4j:commandButton value="Cancelar"
					onclick="#{rich:component('confirmPane')}.hide(); return false;" />
				<a4j:commandButton value="Borrar" onclick="remove(); return false;" />
			</rich:popupPanel>

			<rich:popupPanel header="Pago" id="editPane"
				domElementAttachment="parent" autosized="true">
				<h:panelGrid columns="4" id="editGrid">
					<h:outputText value="Id de pago" />
					<h:outputText value="#{pago.id.pagoId}" />
					<h:outputText />
					<h:panelGroup />
					<h:outputText value="Monto a pagar" />
					<h:inputText label="Pago Monto" id="operacionPagoMonto"
						value="#{addPagoView.edited.operacionPagoMonto}" size="10"
						required="true">
						<f:validateDoubleRange minimum="0"/>
					</h:inputText>
					<h:message for="operacionPagoMonto" />
					<h:panelGroup />
					<h:outputText value="Fecha de pago" />
					<rich:calendar id="operacionPagoFecha" mode="ajax"
						boundaryDatesMode="scroll"
						value="#{addPagoView.edited.operacionPagoFecha}" />
					<h:message for="operacionPagoFecha" />
					<h:panelGroup />
				</h:panelGrid>
				<a4j:commandButton value="Guardar"
					action="#{listPagoView.store}" render="table"
					execute="editPane"
					oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('editPane')}.hide();}" />
				<a4j:commandButton value="Cancelar"
					onclick="#{rich:component('editPane')}.hide(); return false;" />
			</rich:popupPanel>

		</h:form>

	</ui:define>
</ui:composition>
